<template>
	<view class="contain">
		    <view class="top-content"></view>
         <view class='topradio'>
		<view class="childborder">
			<uni-list>
				<uni-list-item showArrow="true" class="list1" title="">
					 <template slot="header">
						<image class="slot-image" src="/static/me/my.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
					<text>名称</text>
					<text style="position: absolute; right:30rpx;">{{name}}</text>
				
					</template>
					
					</uni-list-item>
				<uni-list-item showArrow="true" class="list1"  ><template slot="header">
						<image class="slot-image" src="/static/me/profile.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
						<text>职位</text>
					<text style="position: absolute; right:30rpx;">{{posion}}</text>
					</template></uni-list-item>
				<uni-list-item showArrow="true" class="list1"  ><template slot="header">
						<image class="slot-image" src="/static/me/phone.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
							<text>电话</text>
					<text style="position: absolute; right:30rpx;">{{form.phonenumber}}</text>
					</template></uni-list-item>
				<uni-list-item showArrow="true" class="list1"  title=""><template slot="header">
						<image class="slot-image" src="/static/me/at.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
					<text>邮箱</text>
					<text style="position: absolute; right:30rpx;">{{form.email}}</text>
					</template></uni-list-item>
				<uni-list-item
         showArrow="true" 
         	link 
         	@click="clearClickone" 
         class="list"  title="修改密码"><template slot="header">
						<image class="slot-image" src="/static/me/edit.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
					</template>
          </uni-list-item>
						<uni-list-item showArrow="true"
						@click="clearClick" 
				link 
						 class="list"  title="清除视频缓存"><template slot="header">
						<image class="slot-image" src="/static/me/video-light.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
					<u-modal @confirm='clearbtn()' :show-cancel-button='true' v-model="clearshow" :content="clearcontent"></u-modal>
					</template></uni-list-item>
          	<uni-list-item 
				@click="phoneClick" 
				link  
				showArrow="true" 
				class="list"  
				title="远程配置">
				<template slot="header">
						<image class="slot-image" src="/static/me/settingss.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
	
					</template>
					</uni-list-item>
          	<uni-list-item 
				@click="phoneClick" 
				link  
				showArrow="true" 
				class="list"  
				title="联系我们">
				<template slot="header">
						<image class="slot-image" src="/static/me/service.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
					</template>
					</uni-list-item>
				<uni-list-item 
				@click="aboutClick" 
				link  
				showArrow="true" 
				class="list"  
				title="关于">
				<template slot="header">
						<image class="slot-image" src="/static/me/info.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
					<u-modal v-model="show" :content="content"></u-modal>
					</template>
					</uni-list-item>
			</uni-list>
		</view>
		<view class="bottom" >
				<u-button  @click="handleOut" class="btn" type="primary" :ripple="true" ripple-bg-color="#32afff">退出登录
    	</u-button>
		</view>
	</view>
	</view>
</template>
<script>
import { userProfileget } from "@/api/index.js";
export default {
  data() {
    return {
      data: {
        name: "测试员",
        time: "2021.8.18 12:04:56"
      },
      name: "",
      posion: "",
      form: {},
      show: false,
      showone:false,
      clearshow: false,
      value1:'',
      value2:'',
      value3:'',
      content: "版本信息:1.1",
      clearcontent: "确定清除所有缓存视频?"
    };
  },
  onLoad: function() {
    // getApp().globalData.uname
    // getApp().globalData.uname
    this.name = uni.getStorageSync("nickName");
  },
  onShow() {
    this.getList();
  },
  onPullDownRefresh() {},
  methods: {
    getList() {
      userProfileget().then(res => {
        this.form = res.data;
        this.posion = res.roleGroup;
      });
    },
    taskStatusTabChange(index) {
      // this.currentTaskStatusTab = index
    },
    handleOut() {
      uni.navigateTo({
        url: "/pages/login/login"
      });
      uni.removeStorageSync("token");
    },
    clearClickone(){
      console.log(1111)
       uni.navigateTo({
           url:
             `/pages/preview/pasword`
         });
    },
    monitorClick(){
       uni.navigateTo({
           url:
             `/pages/monitor/index`
         });
    },
    aboutClick() {
      this.show = true;
    },
    clearClick() {
      this.clearshow = true;
    },
    clearbtn() {
      let that = this;
      uni.getSavedFileList({
        success: function(res) {
          if (res.fileList.length === 0) {
            uni.showToast({
              icon: "none",
              title: "暂无缓存"
            });
          } else {
            uni.showLoading({
              title: "清除中",
              mask: true
            });
            let flag = 0;
            res.fileList.forEach(item => {
              console.log(2);
              flag += 1;
              uni.removeSavedFile({
                filePath: item.cachePath,
                complete: function(res) {}
              });
              console.log(flag, "xxxx");
              if (flag == res.fileList.length) {
                console.log(3);
                uni.setStorageSync("cacheList", []);
                uni.hideLoading();
                uni.showToast({
                  icon: "none",
                  title: "清除成功"
                });
              }
            });
          }
        }
      });
    },
    phoneClick(){
      uni.makePhoneCall({
    phoneNumber: '13940382928' //仅为示例
});
    }
  }
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: white;
  // padding: 50rpx;
  // background-color: #007AFF;

  .top {
    height: 240rpx;
    padding: 25px;
    background-color: #0065fd;

    .img {
      float: left;
      // background-color: white;
      image {
        // margin-top: 10rpx;
        background-color: white;
        width: 150rpx;
        height: 150rpx;
        border-radius: 75rpx;
      }
    }

    .text {
      float: right;
      color: white;

      .name {
        padding-top: 10rpx;
        font-size: 32rpx;
        font-weight: 600;
      }

      .time {
        padding-top: 10rpx;
      }
    }
  }

  .bottom {
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    height: 70rpx;
    text-align: center;
    line-height: 100rpx;
  }
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 50rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 0rpx 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 400rpx;
  height: 70rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  // text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //
}
.list1 {
  padding: 25rpx 0rpx 25rpx 0rpx;
  /deep/ .uni-icon-wrapper {
    display: none;
  }
}
.list {
  padding: 25rpx 0rpx 25rpx 0rpx;
}
// /deep/ .uni-icon-wrapper {
//   display: none;
// }
/deep/ .valueone {
/deep/ .valueone {
  text-align: left !important
}
}

</style>
